<template>
  <div class="Pure-white">
    <p class="c-theme">长江流域企业相关标准数据</p>
    <p class="c-bodey">
      <span class="c-span"></span> 基本信息
      <span class="c-spanr">
        <img src="../../../img/Color Overlay.png" alt="" />
      </span>
    </p>

    <div class="data-time">
      <el-row>
        <el-col :span="6"
          ><div class="Data-volume">
            数据量： <span>72,436,321条</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="Data-volume">
            发布时间：<span>2022-12-29 23:25:23</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="Data-volume">
            更新时间： <span>2022-12-29 23:25:23</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="Data-volume">更新频率： <span>24小时</span></div></el-col
        >
      </el-row>
    </div>

    <p class="data-foder">
      <span class="data-jk">接口描述：</span>
      长江流域各省份提交的企业相关数据较为分散，不易于治理任务进行，经过分析比对后建立形成长江流域企业信息的标准数据表。
    </p>
    <p class="c-bodey">
      <span class="c-span"></span> 接口使用情况
      <span class="c-spa">
        <img src="../../../img/Color Overlay.png" alt="" />
      </span>
    </p>

    <div id="Interfce-sage"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initEchart();
  },

  methods: {
    initEchart() {
      var myecart = echarts.init(document.getElementById("Interfce-sage"));
      myecart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2022.03",
            "2022.04",
            "2022.05",
            "2022.06",
            "2022.07",
            "2022.08",
            "2022.09",
            "2022.10",
            "2022.11",
            "2022.12",
            "2023.01",
            "2023.02",
          ],
        },
        grid: {
          bottom: 30,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: "line",
            smooth: true,
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#014FE9",
                },
                {
                  offset: 1,
                  color: "#FFFFFF",
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.Pure-white {
  background-color: #fff;
  height: 100%;
padding: 20px;
}
.c-theme {
  font-size: 24px;
  font-weight: 700;
  color: #333333;

  /* line-height: 18px; */
}
/* 基本信息 */
.c-bodey {
  margin: 14px 0 15px 0;
  font-size: 18px;
  font-weight: 700;
}
.c-span {
  display: inline-block;
  width: 5px;
  line-height: 20px;
  height: 15px;
  margin-right: 8px;
  border-radius: 3px;
  /* color: #000000 ; */
  background: #3272ef;
}
.c-spanr > img {
  display: inline-block;
  border: 1px dashed rgb(218, 212, 212);
  width: 90%;
  float: right;
  margin-top: 10px;
}
.c-spa>img{
display: inline-block;
  border: 1px dashed rgb(218, 212, 212);
  width: 87%;
 float: right;
 margin-top: 10px;
  margin-left: 10px;
}

/* 基本信息 */

/* 数据量 */
.Data-volume {
  font-size: 14px;
  color: #222222;
  font-weight: 700;
}
.data-time {
  border-bottom: 1px dashed #e2e7ef;
  height: 35px;

}
.data-foder {
  margin-top: 15px;
  font-size: 14px;
}
.data-jk {
  font-size: 14px;
  color: #222222;
  font-weight: 700;
}
/* 数据量 */

/* 接口使用情况 */
#Interfce-sage {
  height: 366px;
  background-color:#F8FBFF ;
  padding-right:15px ;
}


/* 接口使用情况 */
</style>
